<template>
  <div>
    <el-card class="content scrollbar">
      <el-form class="search ml20" :inline="true" label-suffix="：" size="mini">
        <el-form-item label="药品类型">
          <el-input v-model="search.drugTypeName" clearable class="w150" placeholder="请输入药品类型"
            @keyup.enter.native="getList('search')" />
        </el-form-item>
        <el-form-item label="创建人">
          <el-input v-model="search.createBy" clearable class="w130" placeholder="请输入创建人"
            @keyup.enter.native="getList('search')" />
        </el-form-item>
        <el-form-item label="创建日期">
          <el-date-picker v-model="searchTime" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" value-format="yyyy-MM-dd" class="w220" clearable
            @change="(val) => changeDateRange( val)" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList('search')">确认
          </el-button>
          <el-button @click="searchReset">重置
          </el-button>
        </el-form-item>
        <el-form-item class="ml50">
          <el-button type="primary" @click="detailBtn('新增',{})">新增
          </el-button>
        </el-form-item>
      </el-form>

      <el-table :data="list" size="small" height="68vh" :cell-style="$style.cellStyle"
        :header-cell-style="$style.rowClass">
        <ElTableColumn label="类型编码" prop="drugTypeCode" />
        <ElTableColumn label="药品类型" prop="drugTypeName" />
        <ElTableColumn label="三方编码" prop="thirdCode" />
        <ElTableColumn label="创建方式" prop="dataSource" />
        <ElTableColumn label="优先级" prop="sort" />
        <ElTableColumn label="创建日期" width="200" prop="createTime" />
        <ElTableColumn label="创建人" prop="createBy" />
        <ElTableColumn label="操作" width="180">
          <template slot-scope="{ row }">
            <el-button type="primary" size="mini" @click="detailBtn('修改',row)">修改</el-button>
            <el-button size="mini" @click="hint('del','此操作将永久删除该类型',row)">删除</el-button>
          </template>
        </ElTableColumn>
      </el-table>
      <pagination class="page tc mt10" :total="page.total" :page.sync="page.pageNum" :limit.sync="page.pageSize"
        @pagination="getList" />
      <el-dialog :title="dialogTit" :close-on-click-modal="false" :visible.sync="dialogVisible" width="30%">
        <el-form ref="detail" :model="detail" class="search ml20" label-width="100px" :inline="true" size="mini">
          <el-form-item label="类型名称">
            <el-input v-model="detail.drugTypeName" class="w300" maxlength="10" show-word-limit placeholder="请输入类型名称" />
          </el-form-item>
          <el-form-item v-if="dialogTit == '修改'" label="优先级">
            <el-input v-model="detail.sort" class="w300" placeholder="请输入优先级" />
          </el-form-item>
          <el-form-item label="三方编码">
            <el-input v-model="detail.thirdCode" class="w300" placeholder="请输入三方编码" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
          <el-button size="mini" type="primary" @click="createDetail('detail')">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>

// import SidebarItem from './SidebarItem';
import pagination from '@/components/Pagination';
import { selectList, dictsTypeAdd, dictsTypeUpdate, dictsTypeDelete } from '@/api/drugs';
// import { mapGetters } from 'vuex';
class Page {
  total = 0;
  pageNum = 1;
  pageSize = 30;
}
class Search {
  drugTypeName = '';
  createBy = '';
  startTime = ''; // 创建开始时间
  endTime = ''; // 创建结束时间
}
class Options {
  options = [
    { id: 1, name: '选项一' },
    { id: 2, name: '选项二' },
    { id: 3, name: '选项三' },
    { id: 4, name: '选项四' }
  ];
}
class Detail {
  drugTypeName = '';
  sort = '';
  thirdCode = '';
}
export default {
  components: {
    pagination
  },
  data () {
    return {
      search: new Search(), // 检索条件
      options: new Options(), // 选项
      page: new Page(), // 分页
      detail: new Detail(), // 提交信息
      searchTime: [], // 创建日期
      dialogVisible: false, // 添加编辑
      dialogTit: '', // 弹窗名称
      list: [] // 列表
    };
  },

  mounted () {
    // this.getList();
  },
  computed: {
    // ...mapGetters(['permission'])
  },
  methods: {
    async getList () {
      try {
        const { data } = await selectList({
          pageNum: this.page.pageNum,
          pageSize: this.page.pageSize,
          ...this.search
        });
        // console.log(data);
        this.list = data.list;
        this.page.total = data.total;
      } catch (e) {
        this.page.total = 0;
        this.list = [];
      }
    },
    // 搜索重置
    searchReset () {
      this.search = new Search();
      this.searchTime = [];
      this.getList();
    },
    // 创建时间
    changeDateRange (val) {
      this.search.startTime = val ? val[0] : '';
      this.search.endTime = val ? val[1] : '';
      this.getList('search');
    },

    // 详情跳转
    detailBtn (nameType, row) {
      this.dialogVisible = true;
      this.dialogTit = nameType;
      this.detail = new Detail();
      console.log(row);
      if (nameType == '修改') {
        this.detail.drugTypeName = row.drugTypeName;
        this.detail.sort = row.sort;
        this.detail.thirdCode = row.thirdCode;
        this.detail.id = row.id;
      }
    },

    // 提交
    createDetail (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let hintText = this.dialogTit == '新增' ? `新增${this.detail.drugTypeName}` : `修改${this.detail.drugTypeName}`;
          this.hint('create', hintText);
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 确认提示
    hint (status, hintText, row) {
      this.$confirm(`${hintText}, 是否确认?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          switch (status) {
            case 'del':
              this.delRow(row);
              break;
            case 'create':
              this.submitBrand(row);
              break;
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
    },
    // 提交接口
    async submitBrand () {
      const res = this.dialogTit == '新增' ? await dictsTypeAdd({
        ...this.detail
      }) : await dictsTypeUpdate({
        ...this.detail
      });
      this.$notification('操作成功', 'success', res.msg);
      this.dialogVisible = false;
      this.getList();

      // console.log(res);
    },
    // 删除
    async delRow (row) {
      const res = await dictsTypeDelete({
        id: row.id
      });
      this.$notification('操作成功', 'success', res.msg);
      this.getList();
    }

  }
};
</script>

<style lang="scss" scoped>
.content {
  // height: calc(100% - 56px);
  // overflow-y: hidden;
  height: 82vh;
  ::v-deep img {
    width: 50px;
    border-radius: 4px;
    margin-top: 6px;
  }
}
.content:hover {
  overflow-y: auto;
}
</style>
